<template>
	<view class="daily-container">
		<view class="daily-content">
			<view class="daily-head">
				<view class="title"></view>
				<view class="sub-title">在人生这场旅程中，探索你的主线剧情</view>
				<view class="main-img"></view>
			</view>
			<view class="user-form">
				<u--form labelPosition="left" :model="userForm" ref="uForm">
					<u-form-item label="姓名: " borderBottom ref="item1">
						<u--input v-model="userForm.name" placeholder="请输入姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item label="性别: " borderBottom ref="item1">
						<u--input v-model="sexText" readonly placeholder="请选择性别" border="none"></u--input>
						<view class="sex-box">
							<view class="sex-item" :class="{ 'selected': index === currentIndex }"
								v-for="(item, index) in genderList" :key="item.value"
								@click="handleSelectGender(item, index)">
								<view :class="['icon', item.type]"></view>
								<text>{{ item.label }}</text>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="日期类型: " borderBottom ref="item1" labelWidth="80">
						<u-radio-group v-model="userForm.type">
							<u-radio v-for="item in typeList" :key="item.value" shape="square" :label="item.label"
								:name="item.value"></u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item label="出生日期: " borderBottom ref="item1" @tap="dateOpen" labelWidth="80">
						<u--input v-model="userForm.birthDay" placeholder="请选择出生日期" border="none" readonly
							style="background-color: transparent;"></u--input>
						<my-datetime ref="dateTimePop" :shownum="4" :titleShow="true" :dateTitleTypes="datetimeTitle" @ok="timeOk"></my-datetime>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
			<view class="submit-btn-wrap">
				<button class="submit-btn" @tap="handleSubmit">开始探索之旅</button>
				<view class="tip" @tap="handleNavToRecord">探索记录</view>
			</view>
		</view>

		<view class="daily-footer">
			<view class="total">
				目前已探索<text class="count">{{ count }}</text>次
			</view>
			<view class="footer-tip">
				推算理论源于八字命理，仅供国学探究，娱乐使用！
			</view>
		</view>

	</view>
</template>


<script>
	import {
		jingsuanCount
	} from '@/common/api_dailyinquiry.js'
	import myDatetime from '@/components/my-datetime/my-datetime'

	const genderList = [{
		label: '男',
		type: 'man',
		value: 0
	}, {
		label: '女',
		type: 'women',
		value: 1
	}]

	const typeList = [{
		label: '阳历',
		value: 1
	}, {
		label: '农历',
		value: 0
	}]

	export default {
		components: {
			myDatetime
		},
		data() {
			return {
				genderList,
				typeList,
				showDate: false,
				userForm: {
					name: '',
					sex: 0,
					type: 1, // 0农历 1阳历
					date: Number(new Date()),
					birthDay: '',
					year: '',
					month: '',
					day: '',
					hours: '',
					minute: '',
				},
				count: 0,
				currentIndex: 0,
				hopeBeginTime: '',
			}
		},
		created() {
			this.getCount()
		},
		onShareAppMessage(res) {
			return {
				title: '国学八字，探究命格',
				path: 'subpage/twelvepattern/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		computed: {
			sexText() {
				return this.genderList[this.currentIndex].label
			},
			datetimeTitle() {
				return this.userForm.type === 1 ? '阳历' : '农历'
			}
		},

		methods: {
			async getCount() {
				const resData = await jingsuanCount()
				if (resData.code === 200) {
					this.count = resData.data
				}
			},
			handleSelectGender(item, index) {
				console.log(item, 'index');
				this.currentIndex = index
				this.userForm.sexText = item.label
				this.userForm.sex = item.value
			},

			// 开启弹窗
			dateOpen() {
				this.$refs.dateTimePop.open(this.userForm.birthDay || '');
			},
			// 关闭弹窗
			timeOk(str, obj) {
				this.userForm.birthDay = obj[4] + ':00'
				this.userForm.year = obj.year
				this.userForm.month = obj.month
				this.userForm.day = obj.day
				this.userForm.hours = obj.hour
				// this.userForm.minute = '00'
				console.log(this.userForm.birthDay, obj, 'timeOk')
			},

			handleNavToRecord() {
				uni.redirectTo({
					url: '/subpage/twelvepattern/discoveryrecord'
				})
			},
			async handleSubmit() {
				if (!this.userForm.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return
				}

				if (!this.userForm.birthDay) {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'error'
					})
					return
				}
				const params = JSON.stringify(this.userForm)
				uni.navigateTo({
					url: `/subpage/twelvepattern/discoveryresult?params=${encodeURIComponent(params)}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.daily-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding-top: 94rpx;
		padding-bottom: 82px;
		background-color: #FAF5FF;
		box-sizing: border-box;

		.daily-content {
			width: 100%;
			padding: 0 32rpx 56rpx;
			box-sizing: border-box;

			.title {
				width: 212px;
				height: 48rpx;

				margin: 0 auto 12rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/biaoti.png') no-repeat center;
				background-size: 100% 100%;

			}

			.sub-title {
				font-size: 26rpx;
				color: #34314F;
				line-height: 56rpx;
				text-align: center;
			}

			.main-img {
				position: relative;
				width: 716rpx;
				height: 484rpx;
				margin: 40rpx auto 0;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/zhutu.png') no-repeat center;
				background-size: 100% 100%;
			}

		}

		.user-form {
			position: relative;
			z-index: 100;
			top: -34rpx;
			width: 100%;
			min-height: 360rpx;
			padding: 24rpx 36rpx 24rpx 46rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 40rpx;
			box-sizing: border-box;

			.u-form-item {
				position: relative;

				.u-form-item__body {
					padding: 20rpx 0 !important;
				}

				.u-radio {
					margin-right: 40rpx;
				}

				.sex-box {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					display: flex;
					z-index: 9;

					.sex-item {
						display: flex;
						width: 144rpx;
						height: 72rpx;
						padding: 16rpx 20rpx;
						background: rgba(52, 49, 79, 0.04);
						border-radius: 18px;
						box-sizing: border-box;

						.icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 24rpx;

							&.man {
								background: url('https://hxs.dsjhs.com:553/prod-api/profile/nan.png') no-repeat center;
								background-size: 100% 100%;
							}

							&.women {
								background: url('https://hxs.dsjhs.com:553/prod-api/profile/nv.png') no-repeat center;
								background-size: 100% 100%;
							}
						}

						&.selected {
							color: #fff;
							background: #34314F;
						}
					}
				}
			}


		}

		.submit-btn-wrap {
			// margin-top: 20rpx;
			box-sizing: border-box;

			.submit-btn {
				height: 96rpx;
				background: #FFDE6D;
				border-radius: 20px;
				font-weight: 600;
				font-size: 32rpx;
				line-height: 96rpx;
				color: #34314F;

				&::after {
					border: 0;
				}
			}

			.tip {
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #34314F;
				line-height: 56rpx;
				text-align: center;
			}
		}

		.daily-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 172rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/jx.png') no-repeat center;
			background-size: 100% 100%;

			.total {
				font-weight: 400;
				font-size: 32rpx;
				color: #A694EA;
				line-height: 44rpx;
				text-align: center;

				.count {
					margin: 0 8rpx;
					font-weight: 600;
				}
			}

			.footer-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: #A694EA;
				line-height: 56rpx;
				text-align: center;
			}
		}
	}

	//单行
	.s_1 {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的部分 */
		max-width: 200px;
		/* 设置最大宽度以限制文本的显示长度 */
	}


	//多行
	.s_2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>